<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <img src="../assets/zjt2.png" alt="" class="back" @click="back()" />
        <div class="head-search">收藏</div>
      </div>
    </div>
    <div class="content">
      <!-- <div v-for="item in dataList" class="block" @click="goPost()"> -->
		  <div v-for="item in dataList" class="block">
		  <!-- 职位 -->
		  <div v-show="item.collectType == 1">
				<div @click="goToPost(item.collectId)">
					<div class="block-top">
						<div>{{item.countOrname}}</div>
						<span>{{item.addtime}}</span>
					</div>
					<div class="block-btm">
						<div>{{item.comOrjob}}</div>
						<span v-show="item.recruitStatus==0" class="bbb">停止招聘</span>
						<span v-show="item.recruitStatus==1">正在招聘</span>
					</div>
				</div> 
			  <div class="block-btn">
				<!-- 停止招聘时不能发简历，但是可以取消收藏 -->
				<div class="green" @click="sendResume(item.collectId)" v-show="item.recruitStatus==1">发送简历</div>
				<div class="grey" @click="cansleCollect(item.collectId, item.collectType)">取消收藏</div>
			  </div>
		  </div>
		  <!-- 公司 -->
		  <div v-show="item.collectType == 0">
				<div @click="goToCompany(item.collectId)">
					<div class="block-top">
						<div>{{item.countOrname}}</div>
						<span>{{item.addtime}}</span>
					</div>
					<div class="block-btm">
						<div>在招职位：{{item.comOrjob}}</div>
						<span>已收藏</span>
					</div>
				</div>
		  			  <div class="block-btn">
		  				<!-- 停止招聘时不能发简历，但是可以取消收藏 -->
		  				<div class="grey" @click="cansleCollect(item.collectId, item.collectType)">取消收藏</div>
		  			  </div>
		  </div>
      </div>
    </div>
	
	<!-- 分割线 -->
	 <div class="content">
	      <div v-for="item in list" class="block" @click="goPost() 
	       ">
	          <div class="block-top">
	              <div>{{item.name}}</div>
	              <span>{{item.time}}</span>
	          </div>
	          <div class="block-btm">
	              <div>{{item.to}}</div>
	              <span v-show="item.look==0" class="bbb">停止招聘</span>
	              <span v-show="item.look==1">正在招聘</span>
	          </div>
	          <div class="block-btn">
	            <!-- 停止招聘时不能发简历，但是可以取消收藏 -->
	            <div class="green" v-show="item.look==1">发送简历</div>
	            <div class="grey">取消收藏</div>
	          </div>
	      </div>
	      <div v-for="item in lists" class="block" @click="goPost() 
	       ">
	          <div class="block-top">
	              <div>{{item.name}}</div>
	              <span>{{item.time}}</span>
	          </div>
	          <div class="block-btm">
	              <div>{{item.to}}</div>
	              <span>已收藏</span>
	          </div>
	          <div class="block-btn">
	            <div class="grey">取消收藏</div>
	          </div>
	      </div>
	      <div v-for="item in list1" class="block" @click="goPost() 
	       ">
	          <div class="block-top">
	              <div>{{item.name}}</div>
	              <span>{{item.time}}</span>
	          </div>
	          <div class="block-btm">
	              <div>在招职位：{{item.to}}</div>
	              <span>已收藏</span>
	          </div>
	          <div class="block-btn">
	            <div class="grey">取消收藏</div>
	          </div>
	      </div>
	    </div>
	
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "store",
  components: {},
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		this.init()
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
	  dataList: [],
      status:localStorage.status,
			list: [
			        {
			          name: "Java开发",
			          time: "2021-12-01",
			          to: "大连xxxxx公司",
			          look: 0,
			        },
			        {
			          name: "WEB前端开发",
			          time: "2021-12-04",
			          to: "大连xxxxx公司",
			          look: 1,
			        }
			      ],
			      list1: [
			        {
			          name: "大连xxxxx公司",
			          time: "2021-12-01",
			          to: 1,
			        },
			        {
			          name: "大连xxxxx公司",
			          time: "2021-12-04",
			          to: 3,
			        }
			      ],
			      lists: [
			        {
			          name: "张三",
			          time: "2021-12-01",
			          to: "web前端"
			        },
			        {
			          name: "李四",
			          time: "2021-12-04",
			          to: "java开发"
			        }
			      ],
    };
  },
  // methods 编写js函数
  methods: {
	//跳转公司
	goToCompany(collectId){
		this.$router.push({name:'firm', params:{companyId: collectId }})
	},
	//跳转职位
	goToPost(collectId){
		this.$router.push({ name: "post", params: { recruitId: collectId } });
	},
	sendResume(collectId){
		this.$http({
		  method: "get",
		  url: 'api/ycuserpost/save',
		  params: {
					'recruitId': collectId,
				'userId': localStorage.getItem("userId")
		  },
		}).then(({data}) => {
		  console.log(data);
		  if(data.msg == '简历不存在，请先创建简历！') {
			  Toast("投递失败，简历不存在，请先创建简历！");
			  this.$http.push("/resume");
		  } 
		  else if(data.msg == '简历已投递过啦！') {
			  Toast("简历已投递过啦！");
		  }
		  else {
			  Toast("投递成功");
		  }
		})
	},
	cansleCollect(collectId, collectType){
		//个人收藏表删除数据
		//获取登录账户id 后台获取
		//职位id JobDetail.recruit.id
		this.$http({
		  method: "get",
		  url: 'api/ycusercollectjob/cancleCollect',
		  params: {
			'userId': localStorage.getItem("userId"),
			'collectId': collectId,
			'collectType': collectType
		  },
		})
		.then(({data}) => {
		  console.log(data);
		})
		this.init()
	},
	init(){
		this.$http({
			method: "get",
			params: {
				page: 1,
				limit: 10,
				userId: window.localStorage.getItem("userId")
				// userId: 1
			},
			url: "api/ycusercollectjob/list"
		}).then(({data}) => {
			console.log(data);
			this.dataList = data.page.list
		})
	},
    goPost() {
      this.$router.push("/post");
    },
    back(){
      this.$router.go(-1);//返回上一层
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 84px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 40px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.block{
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #c7c7c7;
    margin-bottom: 10px;
}
.block-top,.block-btm{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.block-top{
    margin-bottom: 10px;
}
.block-top div{
    font-size: 16px;
}
.block-top span{
    font-size: 12px;
    color: #bbb;
}
.block-btm div{
    color: #bbb;
    font-size: 14px;
}
.block-btm span{
    font-size: 14px;
    color: #3e63a8;
}
.block-btn{
  display: flex;
  width: 100%;
  margin-top: 10px;
}
.green{
  background: #3e63a8;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  margin-right: 10px;
}
.grey{
  background: #ccc;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
}
.bbb{
  color: #bbb !important;
}
</style>
